<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .ipt {
        width: 200px;
        height: 30px;
        border: 1px solid blue;
    }
</style>

<body>
    <div id="app">
        <input type="text" value="请输入内容进行查找" class="ipt">
        <div class="container" v-if="list.length > 0">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>资产名称</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>

                </thead>
                <tbody>
                    <tr v-for="(item,i) in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td @click="shanchu(i)"><a href="#">删除</a></td>
                    </tr>

                </tbody>

            </table>
            <div>总价：{{zongjia}}</div>
        </div>
        <div v-else>没有东西了快去买把·····</div>
        <input type="text">
        <input type="text" name="" id="">
        <button>添加</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>

        const vm = new Vue({

            el: '#app',
            data: {
                list: [
                    { id: 1, name: '外套', price: 99 },
                    { id: 2, name: '裤子', price: 34 },
                    { id: 3, name: '鞋', price: 25.4 },
                    { id: 4, name: '头发', price: 19900 }
                ]
            },

            computed: {
                //计算总价功能
                zongjia() {
                    let num = 0;
                    this.list.forEach(i => {
                        num += i.price
                    });
                    return num.toFixed(2)
                }
            },
            methods: {
                //删除功能
                shanchu(i) {
                    if (!window.confirm('确定要删除吗')) {
                        return
                    }
                    this.list.splice(i, 1)
                }
            }
        })
    </script>
</body>

</html>